@import "partials/mixins";
.mapBox {
  position: relative;
  width: 100%;
  height: ptr(300px);
  .pos {
    position: absolute;
    color: #fff;
    width: ptr(16px);
    line-height: ptr(16px);
    text-align: center;
    &.N {
      top: ptr(0px);
      left: 50%;
      margin-left: ptr(-8px);
    }
    &.S {
      bottom: ptr(0px);
      left: 50%;
      margin-left: ptr(-8px);
    }
    &.E {
      top: 50%;
      left: ptr(0px);
      margin-top: ptr(-8px);
    }
    &.W {
      top: 50%;
      right: ptr(0px);
      margin-top: ptr(-8px);
    }
  }
  .mapList {
    top: ptr(6px);
    bottom: ptr(6px);
    left: ptr(6px);
    right: ptr(6px);
    position: absolute;
    overflow: auto;
    .rectangle {
      width: 100%;
      height: 100%;
      background-color: #000;
      position: relative;
      .latticeButton {
        position: absolute !important;
        border: ptr(2px) solid #403F3F;
        background-color: #060E11;
        padding: 0 ptr(10px);
        height: ptr(20px);
        line-height: ptr(20px);
        box-sizing: content-box;
        color: #ccc;
        position: relative;
        text-align: center;
        font-size: ptr(12px);
        &.active {
          background-color: #403F3F;
        }
      }
    }
  }
}